<!DOCTYPE html>
<html>
<head>
    <title>Fig. 4.18 Reproduction</title>
</head>
<body>

<canvas id="physicsCanvas" width="500" height="400" style="border: 1px solid #ccc;"></canvas>

<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Clear canvas with a white background
    ctx.fillStyle = 'white';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    /**
     * Draws a shape defined by a path function and fills it with diagonal hatching.
     * @param {function} pathDrawer - A function that takes a context and draws a path.
     */
    function drawAndHatchShape(pathDrawer) {
        ctx.save();
        ctx.lineWidth = 3;
        ctx.strokeStyle = 'black';

        // Begin the path for the shape's outline
        ctx.beginPath();
        pathDrawer(ctx);
        ctx.closePath();

        // Stroke the outline
        ctx.stroke();

        // --- Hatching ---
        // Save the context state before clipping
        ctx.save();
        
        // Clip the drawing area to the shape's path
        ctx.clip();
        
        // Set properties for the hatch lines
        ctx.lineWidth = 2.5;
        const spacing = 12;
        
        // Draw the diagonal hatch lines (with a slope of -1)
        ctx.beginPath();
        // The lines are of the form x + y = c. Iterate c to cover the canvas.
        for (let c = -50; c < canvas.width + canvas.height; c += spacing) {
            ctx.moveTo(c, 0);
            ctx.lineTo(0, c);
        }
        ctx.stroke();
        
        // Restore the context to remove the clipping mask
        ctx.restore(); 
        
        // Restore the context to its original state before this function was called
        ctx.restore(); 
    }

    // --- Define Conductor Paths ---

    // Path for the left conductor
    const drawLeftConductor = (ctx) => {
        ctx.moveTo(125, 160);
        ctx.bezierCurveTo(115, 130, 145, 115, 165, 120);
        ctx.bezierCurveTo(190, 125, 195, 150, 180, 165);
        ctx.bezierCurveTo(165, 180, 140, 175, 125, 160);
    };

    // Path for the right conductor
    const drawRightConductor = (ctx) => {
        ctx.moveTo(275, 155);
        ctx.bezierCurveTo(285, 115, 315, 105, 340, 115);
        ctx.bezierCurveTo(365, 125, 375, 140, 360, 155);
        ctx.bezierCurveTo(345, 175, 295, 180, 275, 155);
    };

    // --- Draw the Conductors ---
    drawAndHatchShape(drawLeftConductor);
    drawAndHatchShape(drawRightConductor);

    // --- Draw Coordinate System ---
    const origin = { x: 180, y: 250 };
    const axisLength = 80;
    const arrowSize = 8;
    ctx.lineWidth = 2;
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';

    // Y-axis
    ctx.beginPath();
    ctx.moveTo(origin.x, origin.y);
    ctx.lineTo(origin.x, origin.y - axisLength);
    ctx.stroke();
    // Arrow for Y
    ctx.beginPath();
    ctx.moveTo(origin.x, origin.y - axisLength);
    ctx.lineTo(origin.x - arrowSize / 2, origin.y - axisLength + arrowSize);
    ctx.lineTo(origin.x + arrowSize / 2, origin.y - axisLength + arrowSize);
    ctx.closePath();
    ctx.fill();

    // X-axis
    ctx.beginPath();
    ctx.moveTo(origin.x, origin.y);
    ctx.lineTo(origin.x + axisLength, origin.y);
    ctx.stroke();
    // Arrow for X
    ctx.beginPath();
    ctx.moveTo(origin.x + axisLength, origin.y);
    ctx.lineTo(origin.x + axisLength - arrowSize, origin.y - arrowSize / 2);
    ctx.lineTo(origin.x + axisLength - arrowSize, origin.y + arrowSize / 2);
    ctx.closePath();
    ctx.fill();

    // Z-axis symbol (out of page)
    const zPos = { x: origin.x - 20, y: origin.y };
    const zRadius = 7;
    ctx.beginPath();
    ctx.arc(zPos.x, zPos.y, zRadius, 0, 2 * Math.PI);
    ctx.stroke();
    ctx.beginPath();
    ctx.arc(zPos.x, zPos.y, 1.5, 0, 2 * Math.PI);
    ctx.fill();

    // --- Draw Text Labels ---
    ctx.font = '22px serif';
    ctx.fillText('y', origin.x - 5, origin.y - axisLength - 5);
    ctx.fillText('x', origin.x + axisLength + 5, origin.y + 5);
    ctx.fillText('z', zPos.x - zRadius - 15, origin.y + 5);

    // Mu and Epsilon
    ctx.fillText('\u03BC, \u03B5', 220, 220); 

    // Figure Caption
    ctx.font = 'bold 20px serif';
    ctx.fillText('Fig. 4.18', 210, 350);

</script>

</body>
</html>